<template>
	<view style="background: #faf9f9;min-height: 100vh;max-height: 100%">
		<!-- 搜索 -->



    <view style="">
      <img style="width: 100%" src="https://hyxs.ychlkj.cn/uploads/20240110/d8f6155fd26e89ef49aee8a01f6366c8.png">
    </view>

    <view style="width: 100%;padding-left: 5px;top: 50px;position: absolute;
    display: flex;justify-content: space-around;align-items: center">
      <img @click="toBack()" style="width: 32px;height: 32px" src="https://hyxs.ychlkj.cn/uploads/20240111/f454492ca519145cda3e68421e6d5e20.png">

      <view class="top-search">
        <img alt="" style="width: 20px;height: 20px;margin-right: 10px" src="https://hyxs.ychlkj.cn/uploads/20240110/5c6ee4ed371fc70d76f80dd99f50eab7.png">
        <input class="text" placeholder="请输入搜索内容" v-model="searchValue" />
      </view>
      <view>搜索</view>
    </view>

    <view style="position: absolute;top: 115px">
      <view style="color: #333333;font-size: 20px;font-weight: 600;margin-left: 20px;margin-bottom: 10px">
        搜索历史
      </view>
      <view style="display: flex;flex-wrap: wrap;">
        <view class="history" v-for="(item,index) in dataList.nansearch">{{item.keywords}}</view>
      </view>

      <view style="color: #333333;font-size: 20px;font-weight: 600;margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
        热门搜索
      </view>
      <view style="display: flex;flex-wrap: wrap;">
        <view class="history" v-for="(item,index) in dataList.hotsearch">{{item.keywords}}</view>
      </view>


      <view style="display: flex;width: 100vw;overflow-x: auto;white-space: pre;">

        <view class="hot-search-male">

          <view style="padding: 16px">男生热搜作品</view>

          <view>
            <view style="display: flex;align-items: center;">
              <view class="hot">1</view>
              <view style="margin-right: 12px">
                <img style="width: 30px;height: 40px;border-radius: 4px" src="https://hyxs.ychlkj.cn/uploads/20240111/440154c033529ed9944c4e50bb733194.png">
              </view>
              <view>
                <view style="font-size: 14px">推理演绎法</view>
                <view style="color: #AAAAAA;font-size: 12px">完结 ● 100w人在读</view>
              </view>
            </view>
            <view style="display: flex;align-items: center;">
              <view class="hot">1</view>
              <view style="margin-right: 12px">
                <img style="width: 30px;height: 40px;border-radius: 4px" src="https://hyxs.ychlkj.cn/uploads/20240111/440154c033529ed9944c4e50bb733194.png">
              </view>
              <view>
                <view style="font-size: 14px">推理演绎法</view>
                <view style="color: #AAAAAA;font-size: 12px">完结 ● 100w人在读</view>
              </view>
            </view>
            <view style="display: flex;align-items: center;">
              <view class="hot">1</view>
              <view style="margin-right: 12px">
                <img style="width: 30px;height: 40px;border-radius: 4px" src="https://hyxs.ychlkj.cn/uploads/20240111/440154c033529ed9944c4e50bb733194.png">
              </view>
              <view>
                <view style="font-size: 14px">推理演绎法</view>
                <view style="color: #AAAAAA;font-size: 12px">完结 ● 100w人在读</view>
              </view>
            </view>
          </view>
        </view>



        <view class="hot-search-female">

          <view style="padding: 16px">男生热搜作品</view>

          <view>
            <view style="display: flex;align-items: center;">
              <view class="hot">1</view>
              <view style="margin-right: 12px">
                <img style="width: 30px;height: 40px;border-radius: 4px" src="https://hyxs.ychlkj.cn/uploads/20240111/440154c033529ed9944c4e50bb733194.png">
              </view>
              <view>
                <view style="font-size: 14px">推理演绎法</view>
                <view style="color: #AAAAAA;font-size: 12px">完结 ● 100w人在读</view>
              </view>
            </view>
            <view style="display: flex;align-items: center;">
              <view class="hot">1</view>
              <view style="margin-right: 12px">
                <img style="width: 30px;height: 40px;border-radius: 4px" src="https://hyxs.ychlkj.cn/uploads/20240111/440154c033529ed9944c4e50bb733194.png">
              </view>
              <view>
                <view style="font-size: 14px">推理演绎法</view>
                <view style="color: #AAAAAA;font-size: 12px">完结 ● 100w人在读</view>
              </view>
            </view>
            <view style="display: flex;align-items: center;">
              <view class="hot">1</view>
              <view style="margin-right: 12px">
                <img style="width: 30px;height: 40px;border-radius: 4px" src="https://hyxs.ychlkj.cn/uploads/20240111/440154c033529ed9944c4e50bb733194.png">
              </view>
              <view>
                <view style="font-size: 14px">推理演绎法</view>
                <view style="color: #AAAAAA;font-size: 12px">完结 ● 100w人在读</view>
              </view>
            </view>
          </view>
        </view>


      </view>

    </view>



	</view>
</template>

<script>
import {
  getMySearch, getSearchLog
} from '@/http/api.js'
	export default {
		data() {
			return {
				yourBaseURL: 'http://hyxs.ychlkj.cn',
				userInfo: uni.getStorageSync('userInfo'),
				inputName: '',
				Ename: '',
				dataList: [],
        searchValue:''
			};
		},
		onLoad(e) {
			this.Ename = e.name
			console.log(e, "搜索结果");
			this.MySearch()
		},
		methods: {
      toBack(){
        uni.navigateBack();
      },

			toBooks(item){
			uni.navigateTo({

				url:'/pages/books/details/details?id='+item.id
			})
				console.log(item.id,"99999");
			},
			// 返回上一页
			toReturn() {
				uni.navigateBack();
			},
			MySearch() {
				let data = {
					"token": uni.getStorageSync('Token'),
					"keywords": this.Ename,
				}
        getSearchLog(data).then((res) => {
					console.log(res, "搜索结果");
					if (res.code == 1) {
						this.dataList = res.data

					}
				})
			},
			// 清除input值
			toNo() {
				this.inputName = ''
			},
			// 搜索input里的值
			search(){

				this.MySearch()
			},

			toSearch() {
				console.log(this.Ename, "搜索值");
				if (this.Ename !== "") {
					this.MySearch()
				}
			},
			toKf() {
				uni.navigateTo({
					url: "../../user/customerService/customerService"

				})
			},
		}

	}
</script>

<style lang="scss">
.top-search{
  padding: 8px;
  display: flex;
  justify-content: left;
  align-items: center;
  background: rgba(255,255,255,0.7);
  box-shadow: 0px 4px 12px 4px rgba(32,32,32,0.02);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  width: 75%;
  border: 1px solid rgba(0,0,0,0.04);
}
.top-search .text{
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  line-height: 14px;
}
.history{
  padding: 4px 12px;
  background: #ECECEC;
  border-radius: 10px;
  margin: 8px 12px;
  color: #333;
  font-weight: 400;
}

.hot{
  width: 20px;
  margin: 16px;
  height: 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(93deg, #FEB3A2 0%, #FF4A40 100%);
  border-radius: 0px 8px 0px 8px;
}

.hot-search-male{
  margin: 20px;
  width: 255px;
  background: linear-gradient(180deg, rgba(255,198,151,0.5) 0%, rgba(255,198,151,0) 25%);
  border-radius: 8px 8px 8px 8px;
  box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.05);
  padding-right: 36px;
}

.hot-search-female{
  margin: 20px;
  width: 255px;
  background: linear-gradient(180deg, rgba(255,202,190,0.5) 0%, rgba(255,202,190,0) 25%);
  border-radius: 8px 8px 8px 8px;
  box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.05);
  padding-right: 36px;
}

</style>
